<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String ctx = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + ctx + "/";
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>买家</title>
    <link rel="stylesheet" href="/css/user.css">
</head>

<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<header>
    <div class="logo">
        <a href="/首页.html">logo</a>
    </div>
    <h2>二手交易平台</h2>
    <div class="mess">
        <ul>
            <li>消息(1)</li>
            <li>交易系统</li>
        </ul>
    </div>
</header>
<div class="content">
    <div class="con-l">
        <div class="con-ll">
            <div class="tx"><img src="/images/头像.jpg" style=" height: 100%;"></div>
            <div class="name">姓名：<p>${sessionScope.userAccount.userName}</p>
            </div>
            <div class="mail">账号：<p>${sessionScope.userAccount.userAddress}</p>
            </div>
        </div>

        <div id="user">
            <li style="background-color:#169BD5;">
                买
            </li>
            <li><a href="<%=ctx%>/userSell/myGoods">卖</a></li>
        </div>

        <div id="tab">
            <ul>
                <li class="fli">个人信息</li>
                <li>我的订单</li>
                <li>我的投诉</li>
                <li>退出</li>
            </ul>
        </div>
    </div>
    <div class="con-r">
        <div id="tabs">
            <div class="tabs1">
                <h5>个人资料</h5>
                <form action="${pageContext.request.contextPath}/update/updateUser" method="post">
                    <p>姓名
                        <input name="userName" type="text" value="${sessionScope.userAccount.userName}">
                    </p>
                    <p>密码
                        <input name="userPassword" type="password" value="${sessionScope.userAccount.userPassword}">
                    </p>
                    <p>地址
                        <input name="userAddress" type="text" value="${sessionScope.userAccount.userAddress}">
                    </p>
                    <p>信用值
                        <input name="userCredit" type="text" disabled="disabled"
                               value="${sessionScope.userAccount.userCredit}">
                    </p>
                    <p>余额
                        <input type="text" disabled="disabled" value="${sessionScope.userAccount.userMoney}">
                    </p>
                    <button type="submit">更新我的资料</button>
                </form>

            </div>
            <div>
                <h5>我的订单</h5>
                <table border="1px" cellspacing="0px" style="border-collapse:collapse; width: 90%;
                    margin: 30px;">
                    <tr class="mul">
                        <td style="width: 13%;">订单编号</td>
                        <td style="width: 16%;">图片</td>
                        <td style="width: 12%;">物品名</td>
                        <td style="width: 10%;">购买时间</td>
                        <td style="width: 10%;">结束时间</td>
                        <td style="width: 10%;">订单评论</td>
                        <td style="width: 10%;">订单评星</td>
                        <td style="width: 10%;">订单状态</td>
                        <td style="width: 10%;">操作</td>
                        <td style="width: 10%;">投诉</td>
                    </tr>
                    <c:forEach items="#{goodsList}" var="allOrderByGoodsId">
                        <tr class="det">
                            <td>${allOrderByGoodsId.object.orderId}</td>
                            <td><img src="${allOrderByGoodsId.object.goods.goodsImg}"
                                     style="width: 150px; height: 150px; margin-top: 5px"></td>
                            <td>${allOrderByGoodsId.object.goods.goodsName}</td>
                            <td>${allOrderByGoodsId.startTime}</td>
                            <td>${allOrderByGoodsId.endTime}</td>
                            <td>${allOrderByGoodsId.object.orderEvaluate}</td>
                            <td>${allOrderByGoodsId.object.orderChar}</td>
                            <td>${allOrderByGoodsId.object.orderState.commentsState}</td>
                            <td>
                                <c:if test="${allOrderByGoodsId.object.orderState.commentsStateId == 1}">
                                    <input type="button" value="取消订单"
                                           onclick="window.location.href='<%=ctx%>/Order/updateOrderState?orderId=${allOrderByGoodsId.object.orderId}&state=4'">
                                </c:if>
                                <c:if test="${allOrderByGoodsId.object.orderState.commentsStateId == 2}">
                                    <input type="button" value="取消订单"
                                           onclick="window.location.href='<%=ctx%>/Order/updateOrderState?orderId=${allOrderByGoodsId.object.orderId}&state=4'">
                                </c:if>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
                <span id=" part" style="background-color: #fff; border: 1px solid #000;">
                            <img style="margin-left: 10px; float: left;" src="/images/u58.svg">
                            <button style="margin-left: 80px;"
                                    onclick="document.getElementById('part').style.display='none'">X
                            </button>
                            <ul style="margin-left: 10px; padding-bottom: 20px; float: left;">
                                <li>名称：耳机</li>
                                <li>成色：七成新</li>
                                <li>发布人：张三</li>
                                <li>发布时间：2021/12/31</li>
                                <li>地址：四川&ensp;成都</li>
                            </ul>
                            </span>
                <span id="part3"
                      style="background-color: #fff;width: 500px; height: 500px; border: 1px solid #000;">
                        <h2>订单投诉：
                            <li style="float: right;"
                                onclick="document.getElementById('part3').style.display='none'">X</li>
                        </h2>
                        
                        <form action="">
                            <p>订单编号：
                                <input type="number" disabled="disabled" value="349804314">
                            </p>
                            <p>投诉理由：</p>
                            <textarea type="textarea" cols="60" rows="10">请输入投诉理由... </textarea>
                            <p>投诉时间：
                                <input type="datetime" disabled="disabled" value="2021/12/31 23:59">
                            </p>
                            <button>上传图片</button><br>
                            <button class="summit">提交</button>
                        </form>
                    </span>
            </div>
            <div>
                <h5>我的订单</h5>
                <table border="1px" cellspacing="0px" style="border-collapse:collapse; width: 90%;
                    margin: 30px;">
                    <tr class="mul">
                        <td style="width: 13%;">订单编号</td>
                        <td style="width: 10%;">投诉理由</td>
                        <td style="width: 10%;">投诉时间</td>
                        <td style="width: 10%;">投诉处理</td>
                    </tr>
                    <c:forEach items="${complaints}" var="complaints">
                        <tr class="det">
                            <td>${complaints.object.orderId}</td>
                            <td>${complaints.object.complaintReason}</td>
                            <td>${complaints.endTime}</td>
                            <td>${complaints.object.complaintState.complaintsState}</td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    span {
        border-radius: 5px;
        left: 200px;
        bottom: -224px;
        position: absolute;
        width: 350px;
        height: 300px;
        display: none;
        background-color: #EFEFEF;
    }

    span > img {
        margin: 15px 65px;
        width: 165px;
        height: 165px;
    }

    span > button {
        width: 16px;
        position: absolute;
        margin: 12px 0 0 28px;
        height: 16px;
        border: none;
    }

    span > h3 {
        margin: 5px 10px;
    }

    span > li {
        margin: 5px 10px;
        font-size: 15px;
    }

    span > i {
        float: right;
        font-size: 13px;
        margin-right: 20px;
    }

    span > li > p {
        display: inline;
        font-size: 24px;
        color: #f93838;
    }

    span > ul > li > p {
        display: inline;
        font-size: 13px;
        color: #000;
    }

    #part2 > button {
        right: 15px;
        border: none;
        line-height: 30px;
        height: 30px;
    }

    #part2 > img {
        float: left;
        margin: 68px 20px 0;
    }

    #part2 > ul {
        float: left;
        margin: 68px 0 0 0;
    }

    #part2 > ul > li {
        line-height: 30px;
        font-size: 14px;
    }
</style>

<script>
    var tabb = document.getElementById("tab").getElementsByTagName("li");
    var divs = document.getElementById("tabs").getElementsByTagName("div");

    for (var i = 0; i < tabb.length; i++) {
        tabb[i].onclick = function () {
            change(this);
        }
    }

    function change(obj) {
        for (var i = 0; i < tabb.length; i++) {
            if (tabb[i] == obj) {
                tabb[i].className = "fli";
                divs[i].className = "tabs1";
            } else {
                tabb[i].className = "";
                divs[i].className = "";
            }
        }
    }
</script>

</html>